<template>
  <div class="content">
    <div class="header">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="8">
          <!-- <div class="search-box">
            <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div> -->
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" router>
              <template v-if="route.children && route.children.length" v-for="route in $router.options.routes">
                <template v-for="item in route.children">
                  <el-menu-item style="margin-left: 45px;" class="menu-item-name" :key="route.path + '/' + item.path"
                    :index="item.path">
                    {{ item.name }}
                  </el-menu-item>
                </template>
              </template>
            </el-menu>
          </div>
        </el-col>
        <el-col :span="2" :offset="4">
          <div class="username" @click="loginOut">
            退出
          </div>
        </el-col>
        <el-col :span="2">
          <div class="username">

            用户：{{ username }}
          </div>
        </el-col>

      </el-row>
    </div>
    <div style="height:20px"></div>
    <div class="main">
      <router-view />
    </div>

    <!-- 弹出 新增tag -->
    <div class="tag">
      <el-dialog width="20%" title="tag新增" :visible.sync="dialogFormVisible">

      </el-dialog>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      input3: "",
      username: "",
      dialogFormVisible: false,
      form: {
        name: '',
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入标签名字', trigger: 'blur' },
          // { min: 0, max: 6, message: '长度在 0 到 6个字符', trigger: 'blur' },
        ],
      }

    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loginOut() {

      this.$api.loginOut().then(res => {
        if (res.code === 200) {
          this.$router.push({ name: 'Login' })
          this.$forceUpdate();
        } else if (res.code === 201) {
          this.$message({
            message: '名字重复',
            type: 'error'
          });
        }
      });

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {

          this.$api.insertTag({
            name: this.form.name
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '成功',
                type: 'success',
                duration: 200
              });
              this.dialogFormVisible = false;
            } else if (res.code === 201) {
              this.$message({
                message: '名字重复',
                type: 'error'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }

  }, created() {
    this.username = localStorage.getItem("userName");
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #DCDFE6;
  height: 60px;
  line-height: 60px;
  width: 100%;
}

.back {
  background-color: #e4e7ed;
}

.search-box {
  width: 90%;
  height: 90%;
  font-size: 13px;
}

.tag-box {
  text-align: center;
  font-size: 13px;
  color: #a0a4ac;
}

.main {
  background-color: #F2F6FC;
  width: 1200px;
  // height: 800px;
  //水平居中
  margin: auto;
}
.username{
  font-size: 13px;
  color: #606266;
}
</style>


